Css Dersleri Bölüm 17 Konumlandırma (positioning)
Konumlandırma
Css konumlandırma özellikleri bir elementi konumlandırmanıza yarar. Ayrıca elementlerin biribirine göre konumunu ve içeriklere göre konumunu belirli kriterlere göre konumlandırılmasını sağlar. Elementler top, bottom, left ve right özellikleri kullanılarak konumlanabilir. Bununla beraber, position özelliği belirlenmeden bu özellikler işlemez. Ama farklı bir konumlandırma özelliği de sunmaktadırlar. 4 çeşit konumlandırma yöntemi mevcuttur;
Sabit konumlandırma
HTML elementleri varsayılan olarak statiktir yani sabittir konumu. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
Sabit Konumlama
SAbit konumlamaya sahip bir element tarayıcının göreceli konumuna göre sabitler kendini. Pencereyi kaydırdığınız halde konumu değişmeyecektir:
Not: IE7’de ve IE8’de sadece !DOCTYPE belirlendiği takdirde sabit konumlandırma işe yaramaktadır. Sabit konumlanan elementler normal akışın dışında yer alırlar. Döküman ve diğer elementler sabit konumlanan element yokmuş gibi davranırlar. Sabit konumlanan elementler diğerlerinin üzerine çıkarlar.
Göreli Konumlama
Bir göreli konumlu element, normal konumuna göre göreli davranır.
Örneğin
Göreli konumlanmış elementlerin içeriği hareket edebilir ve diğer elementlerin üzeirne çıkabilir, fakat element için ayrılmış konum normal akış içerisinde hala varlığını korur.
Göreli konumlanmış elementler genellikle sınırsız konumlamaya sahip olan elementler için bir taşıyıcı görevi üstlenir.
Sınırsız konumlama
Sınırsız konumlanmış bir element kendisini çevreleyen ilk elemente göre göreli olarak konumlar kendini ki statik konumlamadan farklı bir pozisyona sahip olur. <html> etiketini en birincil element kabul eder eğer çevreleyen bir dış elementi yoksa:
Sınırsız konumlanmış elementler normal akışın dışında yer alırlar. Döküman ve diğer elementler sınırsız element hiç yokmuş gibi davranırlar. Sınırsız konumlanmış elementler diğer elementlerin üzerine çıkarlar.
Elementlerin üzerine çıkma
Elementler normal akışın üzerinde konumlandığı takdirde diğer elementlerin üzerine çıkarlar. “z-index” bir elementin yığılmas sıralamasını belirler. (ki bu elementin önünde arkasında sağında solunda gibidir). Bir element negatif ve pozitif bir sıralamaya sahip olabilir:
Büyük yığılma sırasına sahip olan element daima düşük sıralamaya sahip olanın önünde ye alır.
Not: İki element de eğer üste çıkıyorsa,bir z-index tanımlaması olmadan, HTML etiketi tanımlaması en son yapılan en üstte olacaktır.
Daha fazla örnek için
Elementin şeklini ayarlar Elementin şeklinin nasıl ayarlanacağını gösterir. Element bu şekle iliştirilmiş ve gösterilmiştir.
Bir elment içindeki taşmayı scrol ile nasıl gösterebilirsiniz Belirlenen alana element sığmayınca overflow elementi ile scrolll özelliğinin kullanımıyla bir bar çıkartarak taşan içeriğin gösterimi.
Tarayıcının otomatik olarak taşmanın üstünden gelmesi için ayarlama Tarayıcının otomatik olarak taşmayı kontrol altına almasını gösterir.
Fare işaretçisini değiştirme Fare işaretçisinin değiştirilmesini gösterir.
Tüm css konumlama özellikleri
“CSS” sütunundaki numaralar desteklenen css versiyonunu göstermektedir (CSS1 veya CSS2).
| Özellik | Tanım | Değer | CSS |
|---|---|---|---|
| bottom | Konumlanmış bir kutunun alt tarafının dışsal boşluğuna göre mesafe belirlemesi | auto length % inherit | 2 |
| clip | Sınırsız konumlanmış bir elementi iliştirir | shape auto inherit | 2 |
| cursor | Fare işaretçisini değiştirir, özelleştirir | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help | 2 |
| left | Konumlanmış bir element için sola göre dış kenarla olan ilişkisini mesafe olarak belirler | auto length % inherit | 2 |
| overflow | İçeriği taşan bir elementin kutusunun taşmış kısmı için davranışını belirler | auto hidden scroll visible inherit | 2 |
| position | Bir elementin konumlama tipini belirler | absolute fixed relative static inherit | 2 |
| right | Konumlanmış bir elementin sağ kenara göre mesafesini belirler | auto length % inherit | 2 |
| top | Knoumlanmış bir elementin üst kenara göre mesafesini belirler | auto length % inherit | 2 |
| z-index | Bir elementin yığılma sırasını belirler | number auto inherit | 2 |